<template>
	<div class='vacation'>
		<div class='vacation-title'>
			周末去哪儿
		</div>
		<ul>

			<li 
			class='vacation-item'
			v-for='item in vacationList'
			>
				<div class='vacation-img'>
					<img :src="item.imgUrl">
				</div>
				<div class='vacation-msg'>
					<p>{{item.title}}</p>
					<p>{{item.msg}}</p>
				</div>
			</li>


		</ul>
	</div>
</template>

<script>
export default {
	props:['vacationList'],
	data () {
		return {
			
		}
	}
}
</script>

<style scoped>
.vacation-title{
	font-size: .32rem;
	padding:.24rem;
}
.vacation-item{
	margin-bottom: .1rem;
	background: #fff;
	font-size:.28rem;
}
.vacation-img{
	width:100%;
	height: 0;
	padding-bottom:37.4375%;
}
.vacation-img img{
	width:100%;
}
.vacation-msg{
	padding:.2rem 0 .2rem .2rem;
}
.vacation-msg p{
	margin-top:.2rem;
}
.vacation-msg p+p{
	color: #616161;
    font-size: .24rem;
}
</style>